<template>
	<view :style="viewColor">
		<view class='payment-status'>
			<!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-->
			<view class='iconfont icon-duihao2 icon' v-if ="order_pay_info.paid !=0"></view>
			<view class='iconfont icon-iconfontguanbi icon' v-else></view>
			<!-- 失败时：订单支付失败 -->
			<!-- <view v-if="order_type== 20" class='status'>{{order_pay_info.paid ==  1 ? '商品兑换成功' : order_pay_info.paid==0 && order_pay_info.pay_type != 'offline' && msg != 'success' ? '支付失败' : '未支付'}}</view> -->
			<!-- <view v-else class='status'>{{order_pay_info.paid ==  1 ? '支付成功' : order_pay_info.paid==0 && order_pay_info.pay_type != 'offline' && msg != 'success' ? '支付失败' : '未支付'}}</view> -->
			<view class="status">{{payResult}}</view>
			<view class='wrapper'>
				<view v-if="order_type== 20" class='item acea-row row-between-wrapper'>
					<view>订单编号</view>
					<view class='itemCom'>{{order_pay_info.group_order_sn}}</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view>{{order_type== 20 ? '兑换时间' : '下单时间'}}</view>
					<view class='itemCom'>{{order_pay_info.create_time}}</view>
				</view>
				<view v-if="order_type== 20" class='item acea-row row-between-wrapper'>
					<view>兑换方式</view>
					<view class='itemCom'>积分兑换</view>
				</view>
				<view v-else class='item acea-row row-between-wrapper'>
					<view>支付方式</view>
					<view v-if="order_pay_info.pay_type==1 || order_pay_info.pay_type==2 || order_pay_info.pay_type==3" class='itemCom'>微信</view>
					<view v-else-if="order_pay_info.pay_type==4 || order_pay_info.pay_type==5" class='itemCom'>支付宝</view>
					<view v-else class='itemCom'>余额</view>
				</view>
				<view v-if="order_type== 20" class='item acea-row row-between-wrapper'>
					<view>支付积分</view>
					<view class='itemCom'>{{order_pay_info.integral}}</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view>支付金额</view>
					<view class='itemCom'>{{order_pay_info.pay_price}}</view>
				</view>
				<view v-if="order_pay_info.give_integral > 0 && order_pay_info.paid" class='item acea-row row-between-wrapper'>
					<view>赠送积分</view>
					<view class='itemCom t-color'>{{order_pay_info.give_integral}}</view>
				</view>
				<!--失败时加上这个  -->
				<view class='item acea-row row-between-wrapper' v-if="order_pay_info.paid==0 && order_pay_info.pay_type != 'offline' && msg != 'success'">
					<view>失败原因</view>
					<view class='itemCom'>{{order_pay_info.pay_type==0 ? '余额不足':msg}}</view>
				</view>
			</view>
			<!--失败时： 重新购买 -->
			<view @tap="goOrderDetails">
				<button formType="submit" class='returnBnt gColor' hover-class='none'>查看订单</button>
			</view>
			<button @click="goPink(order_pay_info.activity_id)" class='returnBnt s-Color' formType="submit" hover-class='none' v-if="order_pay_info.activity_type == 4 && order_pay_info.paid">邀请好友参团</button>
			<button v-if="!order_pay_info.paid || order_pay_info.activity_type != 4" @click="goIndex" class='returnBnt s-Color' formType="submit" hover-class='none'>返回首页</button>
			<view class="coupon-wrapper" v-if="couponList.length>0 && order_pay_info.paid">
				<view class="hd">
					<view class="line"></view>
					<view class="txt">赠送优惠券</view>
					<view class="line"></view>
				</view>
				<view class="coupon-box" :class="{on:isOpen}">
					<block v-for="(item,index) in couponList" :key="index">
						<view class="coupon-item flex">
							<view class="left-bg" :style="{ 'background-image': `url(${domain}/static/diy/couponBg${keyColor}.png)` }"><text>￥</text>{{item.coupon_price}}</view>
							<view class="info">
								<view class="title">{{item.title}}</view>
								<view class="des">满{{item.use_min_price}}元可用</view>
								<block v-if="item.coupon_type == 1">
									<view class="des">有效期:{{ item.use_start_time |timeYMD }}-{{ item.use_end_time |timeYMD}}</view>
								</block>
								<block v-if="item.coupon_type == 0">
									<view class="des">领取后{{ item.coupon_time}}天内可用</view>
								</block>
							</view>
						</view>
					</block>
				</view>
				<view class="more" v-if="couponList.length>2" @click="bindMore">
					{{ text }}
					<text v-if="!isOpen" class="iconfont icon-xiangxia"></text>
					<text v-else class="iconfont icon-xiangshang"></text>
				</view>
			</view>
			
			
		</view>
		<view class="product-con">
			
			<!-- 海报展示 -->
			<view class='poster-pop' v-if="posterImageStatus">
				<image src='../../static/images/poster-close.png' class='close' @click="posterImageClose"></image>
				<image :src='posterImage'></image>
				<!-- #ifndef H5  -->
				<view class='save-poster' @click="savePosterPath">保存到手机</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="keep">长按图片可以保存到手机</view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<button class="save-poster" open-type="share" hover-class='none' @click="goFriend">
				  <view class="iconfont icon-weixin3">发送给朋友</view>
				</button>
				<!-- #endif -->
			</view>
			<view class='mask' v-if="posterImageStatus"></view>
			<canvas class="canvas" canvas-id='myCanvas' v-if="canvasStatus"></canvas>
		</view>
	</view>
</template>

<script>
	import {getPayOrder, getIdByCart} from '@/api/order.js';
	import {getProductCode} from '@/api/store.js';
	import {imgToBase} from '@/api/user.js';
	import {openOrderSubscribe} from '@/utils/SubscribeMessage.js';
	import {mapGetters} from "vuex";
	import { toLogin } from '@/libs/login.js';
	import { HTTP_REQUEST_URL } from '@/config/app';
	import {
		configMap
	} from "@/utils";
	export default {
		components: {
		
		},
		filters: {
		  timeYMD: function (value) {
				if(value){
					var newDate=/\d{4}-\d{1,2}-\d{1,2}/g.exec(value)
					return newDate[0]
				}
		  }
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				orderId: '',
        group_order_sn: '',
        product_type: 0,
				order_type: '',
				order_pay_info: {},
				status: 0,
				msg: '',
				couponList:[], //优惠券列表
				isOpen:false ,//展开
				moneyBg: '/static/images/couponBg',
				text: '展开更多',
				timer: null,
				payResult: '正在查询支付结果...',
				uid:0,
				id:0,
				codeImg: "",
				posters: false,
				posterImageStatus: false,
				storeImage: '', //海报产品图
				PromotionCode: '', //二维码图片
				canvasStatus: false, //海报绘图标签
				posterImage: '', //海报路径
				posterbackgd: '/static/images/posterbackgd2.png',
				
				actionSheetHidden: true,
				
				storeInfo: {
					store_name: '',
					price: '0.00',
				},
			};
		},
		computed: {
			...configMap(['site_name'], mapGetters(['isLogin','viewColor','keyColor'])),
		},
		onLoad: function(options) {
			if (!options.order_id) return this.$util.Tips({
				title: '缺少参数无法查看订单支付状态'
			}, {
				tab: 3,
				url: 1
			});
			this.orderId = options.order_id;
			this.order_type = options.order_type;
			this.status = options.status || 0;
			this.msg = options.msg || '';
			if (this.isLogin) {
				this.refreshData();
			} else {
				toLogin()
			}	
		},
		onHide: function(){
			clearInterval(this.timer);
			this.timer = null;
		},
		// #ifdef MP
		onShareAppMessage: function() {
		  let that = this;
		  that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);

      let path = '/pages/other/goods_details/index?id=' + that.id + '&spid=' + that.uid
      if (that.product_type === 5) {
        path += '&found_id=-1'
      }
		  
		  return {
		    title: that.storeInfo.store_name || '',
		    imageUrl: that.storeImage || '',
		    path: path,
		  }
		},
		// #endif
		methods: {
			refreshData(){
				this.timer = setInterval(()=>{
					this.getOrderPayInfo();
				},1000)
			},
			// 优惠券展开
			bindMore(){
				this.isOpen = !this.isOpen
				this.text = this.text == '展开更多' ? '收起' : '展开更多';
			},
			/**
			 *
			 * 支付完成查询支付状态
			 *
			 */
			getOrderPayInfo: function() {
				let that = this;
				getPayOrder(that.orderId).then(res => {
					that.uid = res.data.uid;
					that.$set(that, 'order_pay_info', res.data);
					that.couponList = res.data.give_coupon
					if(that.order_type == 20){
						that.payResult = res.data.paid == 1 ? '商品兑换成功' : '支付失败'
					}else{
						that.payResult = res.data.paid == 1 ? '支付成功' : '支付失败'
					}
					uni.setNavigationBarTitle({
						title: res.data.paid == 1 ? '支付成功' : '支付失败'
					});
					if(res.data.paid == 1){
						clearInterval(this.timer);
						this.timer = null;
            // 拼单类型订单
						if (res.data.activity_type === 5 && res.data.orderList.length > 0) {
              that.product_type = res.data.activity_type
              that.group_order_sn = res.data.group_order_sn
              console.log('sn:', that.group_order_sn)
							this.getProductId(res.data.orderList[0].cart_id);
						}
						
					}
				}).catch(err => {
					uni.hideLoading();
				});
			},
			/**
			 * 去首页关闭当前所有页面
			 */
			goIndex: function(e) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			// 去参团页面；
			goPink: function(id) {
				uni.navigateTo({
					url: '/pages/activity/combination_status/index?id=' + id
				});
			},
			/**
			 *
			 * 去订单详情页面
			 */
			goOrderDetails: function(e) {
				let that = this;
				if(that.order_type == 20){
					uni.navigateTo({
						url: '/pages/points_mall/exchange_record?delte=1'
					})	
				}else{
					if (that.order_pay_info.paid == 0) {
						uni.navigateTo({
							url: '/pages/users/order_list/index'
						})	
					} else if(that.order_pay_info&&that.order_pay_info.orderList[0]['is_virtual'] == 2){
						uni.navigateTo({
							url: '/pages/users/order_list/index?status=3'
						})
					}else {	
						uni.navigateTo({
							url: '/pages/users/order_list/index?status=1'
						})
					}
				}
			},
			getProductId: function(cart_id, group_order_sn) {
				let that = this;
				getIdByCart(cart_id).then(res => {
					if (res.status === 200) {
						that.id = res.data.product_id;
						that.storeInfo.store_name = res.data.store_name;
						that.storeInfo.price = res.data.price;
						that.storeImage = res.data.image;
						this.downloadFilePromotionCode();
					}
				})
			},
			
			downloadFilePromotionCode: function(successFn) {
				let that = this;
				let type;
				// #ifndef MP
				type = 'wechat'
				// #endif
				// #ifdef MP
				type = 'routine'
				// #endif
				getProductCode(that.id, {
					type: type,
					product_type: 5,
          group_order_sn: that.group_order_sn
				}).then(async res => {
					that.codeImg = res.data.url
					that.goPoster()
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
					that.posters = false;
					that.$set(that, 'PromotionCode', '');
			
				});
			},
			/**
			 * 生成海报
			 */
			async goPoster() {
				if (this.posterImage) {
					this.posterImageStatus = true
					this.posters = false
					return
				}
				let that = this;
				let arr2
				that.posters = false;
				that.$set(that, 'canvasStatus', true);
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				// #ifdef MP || APP-PLUS
				console.log('MP');
				arr2 = [that.posterbackgd, await that.fileStoreImage(that.storeImage), await that.fileStoreImage(
					that.codeImg), await that.fileStoreImage(that.share_pic)];
				// #endif
				// #ifdef H5
				console.log('H5');
				arr2 = [that.posterbackgd, await that.imgToBase(that.storeImage), await that.imgToBase(that.codeImg),
					await that.imgToBase(that.share_pic)
				];
				console.log(arr2);
				// #endif
				//生成推广海报
				that.$util.goodsPosterCanvas(arr2, that.storeInfo.store_name, that.storeInfo.price, that.site_name,
					that.storeInfo.price,
					function(tempFilePath) {
						that.$set(that, 'posterImage', tempFilePath);
						that.$set(that, 'posterImageStatus', true);
						that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
						that.$set(that, 'canvasStatus', false);
					}, (err) => {
						that.$set(that, 'canvasStatus', false);
					});
			},
			
			//图片转符合安全域名路径
			fileStoreImage(url) {
				if (url) {
					// #ifdef MP  || APP-PLUS
					let ishttps = url.split('//')[0] == 'https:'
					if (!ishttps) {
						url = 'https://' + url.split('//')[1]
					}
					// #endif
					return new Promise((resolve, reject) => {
						let that = this;
						uni.downloadFile({
							url: url,
							success: function(res) {
								resolve(res.tempFilePath);
							},
							fail: function(error) {
								console.log(error)
								return that.$util.Tips({
									title: '请检查图片地址是否在合法域名内'
								});
							}
						});
					})
				}
			},
			/*
			 * 保存到手机相册
			 */
			// #ifdef MP
			savePosterPath: function() {
				let that = this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.saveImageToPhotosAlbum({
										filePath: that.posterImage,
										success: function(res) {
											that.posterImageClose();
											that.$util.Tips({
												title: '保存成功',
												icon: 'success'
											});
										},
										fail: function(res) {
											that.$util.Tips({
												title: '保存失败'
											});
										}
									})
								}
							})
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: that.posterImage,
								success: function(res) {
									that.posterImageClose();
									that.$util.Tips({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: function(res) {
									that.$util.Tips({
										title: '保存失败'
									});
								},
							})
						}
					}
				})
			},
			// #endif
			
			async imgToBase(url) {
				let res = await imgToBase({
					image: url
				})
				return res.data.image
			},
			
			//隐藏海报
			posterImageClose: function() {
				this.posterImageStatus = false
			},
			// 小程序关闭分享弹窗；
			goFriend: function() {
			  this.posters = false;
			},
		},
		destroyed() {
			clearInterval(this.timer);
			this.timer = null;
		},
		deactivated() {
			clearInterval(this.timer);
			this.timer = null;
		}
	}
</script>

<style lang="scss">
	.payment-status {
		background-color: #fff;
		margin: 92rpx 30rpx 30rpx;
		border-radius: 10rpx;
		padding: 1rpx 0 28rpx 0;
	}
	.payment-status .icon {
		font-size: 70rpx;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		color: #fff;
		text-align: center;
		line-height: 140rpx;
		border: 6rpx solid #f5f5f5;
		margin: -76rpx auto 0 auto;
		background-color: #999;
		&.icon-duihao2{
			background-color: var(--view-theme);
		}
	}
	.payment-status .icon.fail {
		text-shadow: 0px 4px 0px #7a7a7a;
	}
	.payment-status .status {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin: 25rpx 0 37rpx 0;
	}
	.payment-status .wrapper {
		border: 1px solid #eee;
		margin: 0 30rpx 47rpx 30rpx;
		padding: 35rpx 0;
		border-left: 0;
		border-right: 0;
	}
	.payment-status .wrapper .item {
		font-size: 28rpx;
		color: #282828;
	}
	.payment-status .wrapper .item~.item {
		margin-top: 20rpx;
	}
	.payment-status .wrapper .item .itemCom {
		color: #666;
	}
	.payment-status .returnBnt {
		width: 630rpx;
		height: 86rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto 20rpx auto;
		&.gColor{
			background-color: var(--view-theme);
		}
		&.s-Color{
			color: var(--view-theme);
			 border: 1px solid var(--view-theme);
		}
	}
	.t-color {
		color: var(--view-theme)!important;
	}
	.coupon-wrapper{
		.hd{
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx 0;
			color: #999999;
			font-size: 24rpx;
			.line{
				width: 70rpx;
				height: 1px;
				background: #DCDCDC;
			}
			.txt{
				margin: 0 20rpx;
			}
		}
		.coupon-box{
			height: 356rpx;
			padding: 0 20rpx;
			overflow: hidden;
			&.on{
				height: auto;
			}
			.coupon-item{
				width: 100%;
				margin-bottom: 20rpx;
				box-shadow:0px 2px 10px 0px rgba(0, 0, 0, 0.06);
				.left-bg{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 236rpx;
					height: 160rpx;
					color: #fff;
					font-size: 64rpx;
					text{
						margin-top: 26rpx;
						font-size: 36rpx;
					}
				}
				.info{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;
					padding: 20rpx 0;
					.title{
						color: #282828;
						font-size: 30rpx;
					}
					.des{
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
		.more{
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 24rpx;
			font-size: 24rpx;
			color: #999999;
			.iconfont{
				margin-top: 6rpx;
				margin-left: 10rpx;
				font-size: 20rpx;
			}
		}
	}
	
	
	.canvas {
		z-index: 300;
		width: 750px;
		height: 1190px;
	}
	
	.poster-pop {
		width: 600rpx;
		height: 897rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 399;
		top: 50%;
		margin-top: -500rpx;
	}
	
	.poster-pop image {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.poster-pop .close {
		width: 46rpx;
		height: 75rpx;
		position: fixed;
		right: 0;
		top: -73rpx;
		display: block;
	}
	
	.poster-pop .save-poster {
		background-color: #df2d0a;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		height: 76rpx;
		line-height: 76rpx;
		width: 100%;
		border-radius: 43rpx;
		margin-top: 20rpx;
	}
	
	.poster-pop .keep {
		color: #fff;
		text-align: center;
		font-size: 25rpx;
		margin-top: 10rpx;
	}
	
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9;
	}
	
	
	.product-con .footer {
		padding: 0 20rpx 0 40rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		height: 100rpx;
		height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		background-color: #fff;
		z-index: 277;
		border-top: 1px solid #f0f0f0;
	
		&.footpl {
			padding-left: 80rpx;
		}
	}
	
	.product-con .footer .item {
		font-size: 18rpx;
		color: #666;
		text-align: center;
	}
	
	.product-con .attribute .atterTxt {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		width: 400rpx;
	}
	
	.product-con .attribute .params {
		margin-right: 20rpx;
		font-size: 28rpx;
		color: #282828;
	
		&:nth-child(2) {
			margin-right: 0;
		}
	}
	
	.product-con .attribute .atterTxt1 {
		color: #282828;
	
		&.hasAttr {
			&:after {
				content: "";
				display: inline-block;
				position: relative;
				top: -6rpx;
				margin: 0 6rpx;
				width: 5rpx;
				height: 5rpx;
				background-color: #282828;
				border-radius: 100%;
			}
	
			&:last-child {
				&:after {
					display: none;
				}
			}
		}
	}
	
	.product-con .wrapper .coupon .activity {
		border: 1px solid var(--view-theme);
		color: var(--view-theme);
	
		&::before,
		&::after {
			border: 1px solid var(--view-theme);
		}
	
		&::before {
			border-left-color: #ffffff;
		}
	
		&::after {
			border-right-color: #ffffff;
		}
	}
	
	.product-con .guaranteeAttr {
		display: inline-block;
		width: 560rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.product-con .footer .item .iconfont {
		text-align: center;
		font-size: 40rpx;
	}
	
	.fenxiang_btn {
		.icon-yishoucang2 {
			color: var(--view-priceColor) !important;
		}
	}
	
	.product-con .wrapper .introduce {
		margin: 20rpx 30rpx 0;
	
		&.atmosphere {
			padding: 20rpx 30rpx;
			margin: 0;
			justify-content: space-between;
			align-items: flex-start;
	
			.title {
				width: 540rpx;
			}
		}
	
		.font-bg-red {
			position: relative;
			/* #ifdef H5 */
			top: -2rpx;
			/* #endif */
			/* #ifndef H5 */
			top: -4rpx;
			/* #endif */
		}
	}
	
	.product-con .footer .item .iconfont.icon-shoucang1 {
		color: var(--view-priceColor);
	}
	
	.integral_count {
		padding: 0 30rpx;
	}
	
	.product-con .integral {
		display: inline-block;
		margin: 20rpx 30rpx 0 0;
		color: #FF9000;
		background-color: #FFF4E6;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 22rpx;
		padding: 0 26rpx;
		font-size: 24rpx;
		font-weight: normal;
	
		&:last-child {
			margin-left: 0;
		}
	}
	
	.product-con .reward {
		display: inline-block;
		// margin: 0rpx 0rpx 0 0;
		color: #146400;
		//background-color: #FFF4E6;
		background-image: url("https://milife-1327809043.cos.ap-shanghai.myqcloud.com/def/dbf46202408132213599565.png");
		background-size: 220rpx;
		width: 65rpx;
		height: 35rpx;
		line-height: 40rpx;
		border-radius: 0rpx;
		padding: 15rpx 80rpx;
		font-size: 36rpx;
		font-weight: normal;
	
		&:last-child {
			margin-left: 0;
		}
	}
	
	.product-con .footer .item .iconfont.icon-gouwuche1 {
		font-size: 40rpx;
		position: relative;
	}
	
	.product-con .footer .item .iconfont.icon-gouwuche1 .num {
		color: #fff;
		position: absolute;
		font-size: 18rpx;
		height: 30rpx;
		border-radius: 200rpx;
		padding: 0 8rpx;
		box-sizing: border-box;
		top: -10rpx;
		right: -10rpx;
		background-color: var(--view-theme);
		min-width: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.product-con .footer .bnt {
		width: 444rpx;
		height: 76rpx;
	}
	
	.product-con .footer .bnt .bnts {
		width: 222rpx;
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 28rpx;
	
		&.sold_out {
			width: 444rpx;
			border-radius: 50rpx;
		}
	
		&.virtual_buy {
			width: 444rpx;
			border-radius: 50rpx;
		}
	}
	
	.product-con .footer .bnt .joinCart {
		border-radius: 50rpx 0 0 50rpx;
		background-image: linear-gradient(90deg, var(--view-bntColor11) 0%, var(--view-bntColor12) 100%);
	
		&.disabled {
			background: #bbb;
		}
	}
	
	.product-con .footer .bnt .buy {
		border-radius: 0 50rpx 50rpx 0;
		background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
	}
	
	.product-con .footer .bnt .buy[disabled] {
		background: #bbb;
	}
	
	.product-con .superior {
		background-color: #fff;
		margin-top: 20rpx;
		padding-bottom: 10rpx;
	}
	
	.product-con .superior .title {
		height: 98rpx;
	}
	
	.product-con .superior .title image {
		width: 30rpx;
		height: 30rpx;
	}
	
	.product-con .superior .title .titleTxt {
		margin: 0 20rpx;
		font-size: 30rpx;
		background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.product-con .superior .slider-banner {
		width: 690rpx;
		margin: 0 auto;
		position: relative;
	}
	
	.product-con .superior .slider-banner swiper {
		height: 100%;
		width: 100%;
	}
	
	.product-con .superior .slider-banner swiper-item {
		height: 100%;
	}
	
	.product-con .superior .slider-banner .list {
		width: 100%;
	}
	
	.product-con .superior .slider-banner .list .item {
		width: 215rpx;
		margin: 0 22rpx 30rpx 0;
		font-size: 26rpx;
	}
	
	.product-con .superior .slider-banner .list .item:nth-of-type(3n) {
		margin-right: 0;
	}
	
	.product-con .superior .slider-banner .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 215rpx;
	}
	
	.product-con .superior .slider-banner .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}
	
	.product-con .superior .slider-banner .list .item .name {
		color: #282828;
		margin-top: 12rpx;
	}
	
	.product-con .superior .slider-banner .swiper-pagination-bullet {
		background-color: #999;
	}
	
	.product-con .superior .slider-banner .swiper-pagination-bullet-active {
		background-color: #e93323;
	}
	
</style>
